<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<!--图标-->
<svg aria-hidden="true" style="width: 0;height: 0;">
    <!--error-->
    <symbol id="error" viewBox="0 0 1024 1024">
        <path d="M0 0h1024v1024H0z" fill="#FFFFFF"></path>
        <path d="M512 512m-450.56 0a450.56 450.56 0 1 0 901.12 0 450.56 450.56 0 1 0-901.12 0Z" fill="#D80405"></path>
        <path d="M245.76 481.28m30.72 0l471.04 0q30.72 0 30.72 30.72l0 0q0 30.72-30.72 30.72l-471.04 0q-30.72 0-30.72-30.72l0 0q0-30.72 30.72-30.72Z"
              fill="#FFFFFF"></path>
    </symbol>
    <!--error2-->
    <symbol id="error2" viewBox="0 0 1024 1024">
        <path d="M521.22851563 521.97009278m-374.0020752-1e-8a374.0020752 374.0020752 0 1 0 748.00415039 0 374.0020752 374.0020752 0 1 0-748.00415039 0Z"
              fill="#F84031"></path>
        <path d="M770.48083497 546.68933106H271.89379883c-13.67797852 0-24.71923828-11.04125977-24.71923828-24.71923828s11.04125977-24.71923828 24.71923828-24.71923828h498.58703614c13.67797852 0 24.71923828 11.04125977 24.71923828 24.71923828s-11.04125977 24.71923828-24.71923828 24.71923828z"
              fill="#F0F0F4"></path>
    </symbol>
    <!--success-->
    <symbol id="success" viewBox="0 0 1024 1024">
        <path d="M506.791 44.917c260.341 0 479.011 208.271 479.011 468.614 0 260.319-218.67 478.988-479.011 478.988-260.319 0-468.592-218.669-468.592-478.988 0-260.343 208.273-468.614 468.592-468.614"
              fill="#46AB8B"></path>
        <path d="M819.2 284.443l41.651 31.232-395.71 416.524-20.815-20.837-260.34-197.832 41.65-41.65 239.505 187.435L819.2 284.443"
              fill="#FFFFFF"></path>
    </symbol>
</svg>

<!--页面-->
<div id="root">
    <!--用户名-->
    <div class="row">
        <!--label-->
        <div class="label">
            <label for="username">用户名：</label>
        </div>
        <!--input-->
        <input id="username"/>
        <!--*-->
        <span class="vital">*</span>
        <!--tips-error-->
        <div id="username-error" class="display-none  tips-error">
            <svg width="1em" height="1em" fill="currentColor">
                <use xlink:href="#error2"></use>
            </svg>
            <span class="tips-text">请输入至少6位的用户名.</span>
        </div>
        <!--tips-success-->
        <div id="username-success" class="display-none  tips-success">
            <svg width="1em" height="1em" fill="currentColor">
                <use xlink:href="#success"></use>
            </svg>
            <span class="tips-text">输入正确.</span>
        </div>
    </div>
    <!--邮箱-->
    <div class="row">
        <!--label-->
        <div class="label">
            <label for="email">邮箱：</label>
        </div>
        <!--input-->
        <input id="email">
        <!--*-->
        <span class="vital">*</span>
        <!--tips-error-->
        <div id="email-error" class="display-none  tips-error">
            <svg width="1em" height="1em" fill="currentColor">
                <use xlink:href="#error2"></use>
            </svg>
            <span class="tips-text">请输入正确的E-Mail地址.</span>
        </div>
        <!--tips-success-->
        <div id="email-success" class="display-none tps tips-success">
            <svg width="1em" height="1em" fill="currentColor">
                <use xlink:href="#success"></use>
            </svg>
            <span class="tips-text">输入正确.</span>
        </div>
    </div>
    <!--个人资料-->
    <div class="row">
        <!--label-->
        <div class="label">
            <label for="material">个人资料：</label>
        </div>
        <!--input-->
        <input id="material"/>
    </div>
    <!--按钮-->
    <div class="row">
        <!--label-->
        <div class="label"></div>
        <!--button-->
        <button id="submit">提交</button>
        <button id="reset">重置</button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="js/index.js"></script>

</body>
</html>